<template name="lmInfo">
	<view class="goodTitleBox">
		<image class="infoBg" src="../../static/acbg.png"></image>
		<view class="goodPrice" v-if="showPrice">
			<text class="price">￥{{ goodData.price }}</text>
			<text class="oldPrice" v-if="goodData.oriPrice > 0 && goodData.oriPrice > goodData.price">￥{{ goodData.oriPrice }}</text>
			<text class="endTime">{{ djsText }}</text>
		</view>
		<view class="gdTitle">
			<view class="mainTitle">
				<text>{{ actName }}</text>
			</view>
			<!-- #ifndef H5 -->
			<!-- 			<view class="shareBox" @tap="share">
				<text class="iconfont icon-share"></text>
				<block v-if="isLogin && userInfo.code && goodData.courseAgent&& (goodData.courseAgent.income1 ||goodData.courseAgent.income2)">
					<text class="red">赚￥{{yongjin}}</text>
				</block>
				<block v-else>
					<text>分享</text>
				</block>
			</view>
 -->
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
import { mapState, mapGetters, mapMutation, mapActions } from 'vuex';
// import COMM from "@/common/common.js";
export default {
	name: 'lmInfo', //组件名称
	// 传递参数
	computed: {
		...mapState({
			isLogin: state => state.user.isLogin,
			userInfo: state => state.user.userInfo
		})
	},
	props: {
		goodData: {
			type: Object,
			default: () => {
				return null;
			}
		},
		showPt: {
			type: Boolean,
			default: false
		},
		showPrice: {
			type: Boolean,
			default: true
		},
		lmInfo: {
			type: Object,
			default: null
		},
		gettime:'',
		endTime:'',
		actName:''
	},
	// 组件参数
	data() {
		return {
			diqu: '',
			showXieyi: false,
			yongjin: 0,
			djsText: ''
		};
	},
	watch: {
		goodData(newVal) {
			this.getDjs();
		}
	},
	// 组件方法
	methods: {
		// share(){
		// 	this.$parent.showPoster();
		// },
		// getCircle(){

		// 	if(this.goodData.courseAgent.income1){
		// 		this.yongjin=this.goodData.courseAgent.income1
		// 	}else{
		// 		this.yongjin=this.goodData.courseAgent.income2
		// 	}
		// 	this.$store.dispatch("apiGetShopDetail",{
		// 		id:this.goodData.storeId?this.goodData.storeId:this.goodData.store.id,
		// 		userId:0
		// 	}).then(res=>{
		// 		let ssq=COMM.getSSQByAreaId(res.data.data.areaId);
		// 		if(res.data.data.streetId){
		// 			this.$store.dispatch("apiGetBusCircle",res.data.data.areaId).then(circleRes=>{
		// 				circleRes.data.data.forEach((x,i)=>{
		// 					if(x.id==res.data.data.streetId){
		// 						this.diqu=x.name
		// 					}
		// 				})
		// 			})
		// 		}else{
		// 			this.diqu=ssq[2]
		// 		}

		// 	})
		// },
		checkXieYi() {
			this.showXieyi = this.goodData.protectList.some(x => {
				return x.name == '协议退100%';
			});
		},
		getDjs() {
			setInterval(() => {
				let _now = new Date();
				let _end = new Date(this.endTime.replace(/-/g, "/"));
				let _leftTime = _end.getTime() - _now.getTime();
				var _kaishi = new Date(this.gettime.replace(/-/g, "/"));				
				var _zhanshiTime = _kaishi.getTime() - _now.getTime();
				if (_zhanshiTime > 0) {
					var month = _kaishi.getMonth() + 1 + '月';
					var date = _kaishi.getDate() + '日';
					this.djsText = '该活动' + month + date + '开始';
				} else if (_leftTime > 0) {
					let _day = Math.floor(_leftTime / (1000 * 60 * 60 * 24));
					let _hour = Math.floor((_leftTime / (1000 * 60 * 60)) % 24);
					let _min = Math.floor((_leftTime / (1000 * 60)) % 60);
					let _sec = Math.floor((_leftTime / 1000) % 60);
					_hour = _hour > 9 ? _hour : '0' + _hour;
					_min = _min > 9 ? _min : '0' + _min;
					_sec = _sec > 9 ? _sec : '0' + _sec;					
					if(_day>=1){
						this.djsText='距离结束：'+_day + "天 " + _hour + ":" + _min + ":" + _sec
					}else{
						this.djsText ='距离结束：'+ _hour + ":" + _min + ":" + _sec
					}
				} else {
					this.djsText = '该活动已结束';
				}
			}, 1000);
		}
	},
	created() {
		// setTimeout(() => {
		// 	//  this.getCircle();
		// 	this.getDjs();
		// }, 500);
	}
};
</script>

<style lang="less" scoped>
.goodTitleBox {
	position: relative;
	background-color: #ffffff;
	padding-top: 13upx;
	// margin-bottom: 13upx;
	padding-bottom: 24upx;
	.infoBg {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
	}
	.goodPrice {
		position: relative;
		z-index: 2;
		padding: 0 28upx;

		display: flex;
		justify-content: flex-start;
		align-items: center;
		.price {
			font-size: 64rpx;
			color: #ffffff;
			font-weight: bold;
		}
		.price:first-letter {
			font-size: 48rpx;
		}
		.oldPrice {
			text-decoration: line-through;
			font-size: 32upx;
			font-weight: bold;
			color: #ffffff;
			margin-left: 20upx;
			flex-grow: 1;
		}
		.endTime {
			height: 36upx;
			font-size: 28upx;
			background-color: rgba(0, 0, 0, 0.15);
			color: #ffffff;
			border-radius: 18upx;
			line-height: 36upx;
			padding: 0 20upx;
		}
	}

	.goodPrice:first-letter {
		font-size: 48rpx;
	}
	.activeBox {
		position: relative;

		.bg {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			z-index: 1;
		}
		.rongqi {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 20upx;
			position: relative;
			padding: 30upx 32upx;
			color: #ffffff;
			position: relative;
			z-index: 5;
		}
		.left {
			display: flex;
			flex-direction: column;
			align-items: center;
			flex-shrink: 0;
			text:first-child {
				font-size: 40upx;
				font-weight: bold;
				margin-bottom: 6upx;
			}
			text:last-child {
				font-size: 32upx;
			}
		}
		.middel {
			display: flex;
			flex-direction: column;
			font-size: 28upx;
		}
		.rightBtn {
			font-size: 32upx;
			margin: 0;
			background-color: rgba(0, 0, 0, 0);
			border: 2upx solid #ffffff;
			color: #ffffff;
			padding: 20upx 30upx;
			line-height: 1;
		}
		image {
			width: 120upx;
			height: 120upx;
		}
	}

	.gdTitle {
		padding: 0 0 0 28upx;
		display: flex;
		align-items: center;
		position: relative;
		z-index: 2;
		.mainTitle {
			font-size: 36rpx;
			font-weight: bold;
			color: #202932;
			flex-grow: 1;
			word-break: break-all;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			color: #ffffff;
			text {
				flex-shrink: 0;
			}
			.xieyiShow {
				flex-shrink: 0;
				background-color: #ffcd11;
				color: #ffffff;
				font-size: 24upx;
				font-weight: normal;
				padding: 2upx 10upx;
				border-radius: 10upx;
				margin-left: 10upx;
			}
		}
		.shareBox {
			flex-shrink: 0;
			display: flex;
			height: 50upx;
			align-items: center;
			background-color: #eeeeee;
			padding: 0 20upx;
			border-top-left-radius: 25upx;
			border-bottom-left-radius: 25upx;
			margin-left: 10upx;
			text {
				font-size: 24upx;
				color: #666666;
				font-weight: normal;
			}
			.iconfont {
				color: #666666;
				font-size: 32upx;
				margin-right: 6upx;
			}
			.red {
				color: #fe305b;
			}
		}
	}

	.sellBox {
		padding: 0 28upx;
		display: flex;
		margin-top: 20upx;
		justify-content: space-between;

		text {
			font-size: 26rpx;
			color: #959ca6;
		}
	}
}
</style>
